<template>
	<!-- 视频监控 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">摄像机统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">视频列表</text></view>
				</template>

				<view class="flex s-center ">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索" v-model="search"
							bgColor="#f5f9fd" @clear="fn2" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" @click="fn2" text="搜索" />
				</view>

				<my-scroll style="height: 500px;" class="m-t-10" @scrolltolower="scrolltolower">
					<my-table :columns="columns" :data="tableData" @row-click="({row})=>handleClick(row)">
						<template #caozuo="{row}">
							<u-icon name="play-circle-fill" color="#2979ff" class="m-center" />
						</template>
					</my-table>
				</my-scroll>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	import {
		getApiFabric,
	} from "@/api/customApi";

	const showMoreKeys = ref([1, 2]),
		collapse = ref(null);

	/*******************************************摄像头统计***************************************/
	let chartData = ref({}),
		opts = ref({
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: "top",
				padding: 0,
				margin: 0,
				fontSize: 10,
				itemGap: 0,
			},
			title: {
				name: "0",
				fontSize: 30,
				color: "#000",
				offsetY: -5,
			},
			subtitle: {
				name: "总数",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
				}
			}
		});

	function fn1() {
		getApiFabric({
			apiCode: "5045eca4-2b4e-4b69-b274-a13f46d53f19",
			propertyMapping: {
				name: "lable",
				value: "val"
			},
		}).then((res) => {
			opts.value.title.name = res.data.reduce((prev, cur) => prev + Number(cur.value), 0);
			chartData.value = JSON.parse(JSON.stringify({
				series: [{
					data: res.data
				}]
			}));
		})
	}

	/*******************************************摄像头列表***************************************/
	const columns = [{
			prop: '监控名称',
			label: '监控名称',
			width: 110
		}, {
			prop: '监控区域',
			label: '监控区域',
			width: 110
		}, {
			prop: '监控状态',
			label: '状态',
			width: 50
		}, {
			prop: 'caozuo',
			label: '播放',
			width: 50
		}],
		tableTotalList = ref([]),
		tableData = ref([]);

	const regionName = ref('全部'),
		search = ref('');

	function fn2() {
		getApiFabric({
			apiCode: "72adb4c1-38e8-4ca4-bc48-1bf517d1a54f",
			propertyMapping: {
				indexCode: "indexCode",
				监控区域: "regionName",
				监控名称: "cn",
				监控状态: "online",
			},
			pageIndex: 1,
			pageSize: 15,
			total: true,
			params: [{
				code: "regionName",
				value: regionName.value,
			}, {
				code: "search",
				value: search.value
			}]
		}).then((res) => {
			tableTotalList.value = res.data || [];
			tableData.value = tableTotalList.value?.slice(0, 10);
			nextTick(() => {
				collapse.value.init()
			})
		})
	}

	function scrolltolower() {
		if (tableData.value.length <= tableTotalList.value.length) {
			tableData.value.push(...tableTotalList.value.slice(tableData.value.length, tableData.value.length + 10))
		}
	}

	function handleClick(row) {
		// 跳转播放页面
		uni.navigateTo({
			url: `/pages/application/xxjc/spjk/playVideo?cameraIndexCode=${row.indexCode}&cameraName=${row.监控名称}`
		})
	}

	function getServerData(refresh) {
		Promise.all([fn1(), fn2()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style lang="scss" scoped>
</style>